import { useContext, useEffect } from "react";
import { ReducerContext } from "../reducer/ReducerProvider";
// import svg2png from "../utils/svg2png";
import Item from "./BasicItem";
import SVGLine from "./Line";

//id 1597664603

function Layer(props: any) {
  const { state, dispatch } = useContext(ReducerContext);
  const { width, height } = props;
  useEffect(() => {
    fetch("http://localhost:8080/chart/1597664603").then((res) =>
      res.json().then((data) => {
        const baseInfo = data.data.data;
        let array = JSON.parse(baseInfo);
        let targetArray = array.map((item: any, index: number) => {
          return {
            ...item,
            index,
          };
        });
        dispatch({ type: "all", data: targetArray });
      })
    );
  }, [dispatch]);

  return (
    <svg width={width} height={height} id="svg">
      {state.data.map((i, index) => (
        <Item {...i} key={index} />
      ))}
      {state.lines.map((line, index) => {
        return <SVGLine {...line} key={index} />;
      })}
    </svg>
  );
}

export default Layer;
